<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" 
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity6">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <style>
        .user-table th {
            font-weight: 600;
            white-space: nowrap;
        }
        
        .user-table .table-action-btn {
            width: 32px;
            height: 32px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            transition: all 0.2s;
        }
        
        .user-table .table-action-btn:hover {
            transform: translateY(-2px);
        }
        
        .avatar-sm {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 1.25rem;
        }
        
        .filter-btn.active {
            border-color: var(--primary-color);
            background-color: var(--primary-color);
            color: white;
        }
    </style>
</head>
<body>
    <div th:replace="~{layout :: body(content=~{::content})}">
        <div th:fragment="content">
            <!-- 页面标题 -->
            <div class="page-header mb-4">
                <h1>用户管理</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a th:href="@{/home}">首页</a></li>
                        <li class="breadcrumb-item"><a th:href="@{/admin/dashboard}">管理员仪表盘</a></li>
                        <li class="breadcrumb-item active" aria-current="page">用户管理</li>
                    </ol>
                </nav>
            </div>
            
            <!-- 用户管理卡片 -->
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 py-3">
                    <div class="d-flex flex-wrap justify-content-between align-items-center">
                        <h5 class="mb-0"><i class="bi bi-people text-danger me-2"></i>用户列表</h5>
                        <div class="d-flex gap-2">
                            <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addUserModal">
                                <i class="bi bi-person-plus me-1"></i>添加用户
                            </button>
                            <button class="btn btn-outline-secondary btn-sm" id="refreshBtn">
                                <i class="bi bi-arrow-clockwise me-1"></i>刷新
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="card-body">
                    <!-- 搜索与过滤 -->
                    <div class="row mb-4">
                        <div class="col-md-6 mb-3 mb-md-0">
                            <div class="input-group">
                                <span class="input-group-text bg-light border-end-0">
                                    <i class="bi bi-search text-muted"></i>
                                </span>
                                <input type="text" class="form-control border-start-0 bg-light" placeholder="搜索用户..." id="searchInput">
                                <button class="btn btn-primary" type="button">搜索</button>
                            </div>
                        </div>
                        <div class="col-md-6 d-flex justify-content-md-end">
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-outline-primary filter-btn active">全部</button>
                                <button type="button" class="btn btn-outline-primary filter-btn">活跃</button>
                                <button type="button" class="btn btn-outline-primary filter-btn">管理员</button>
                                <button type="button" class="btn btn-outline-primary filter-btn">已禁用</button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 用户表格 -->
                    <div class="table-responsive">
                        <table class="table table-hover align-middle user-table">
                            <thead class="table-light">
                                <tr>
                                    <th>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="" id="selectAll">
                                            <label class="form-check-label" for="selectAll">ID</label>
                                        </div>
                                    </th>
                                    <th>用户信息</th>
                                    <th>邮箱</th>
                                    <th>角色</th>
                                    <th>状态</th>
                                    <th class="text-center">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="user : ${users}">
                                    <td>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" th:value="${user.id}">
                                            <label class="form-check-label" th:text="${user.id}"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="avatar-sm me-3 bg-primary text-white">
                                                <i class="bi bi-person"></i>
                                            </div>
                                            <div>
                                                <h6 class="mb-0" th:text="${user.username}">用户名</h6>
                                                <small class="text-muted">ID: <span th:text="${user.id}">1</span></small>
                                            </div>
                                        </div>
                                    </td>
                                    <td th:text="${user.email}">user@example.com</td>
                                    <td>
                                        <span th:each="role : ${user.roles}" class="badge bg-info rounded-pill me-1" th:text="${role}">用户</span>
                                    </td>
                                    <td>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" th:checked="${user.enabled}" disabled>
                                            <label class="form-check-label">
                                                <span th:if="${user.enabled}" class="text-success">已启用</span>
                                                <span th:unless="${user.enabled}" class="text-danger">已禁用</span>
                                            </label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex justify-content-center gap-1">
                                            <button class="btn btn-primary table-action-btn" data-bs-toggle="tooltip" title="编辑用户">
                                                <i class="bi bi-pencil"></i>
                                            </button>
                                            <button class="btn btn-info text-white table-action-btn" data-bs-toggle="tooltip" title="查看详情">
                                                <i class="bi bi-eye"></i>
                                            </button>
                                            <button class="btn btn-danger table-action-btn" data-bs-toggle="tooltip" title="删除用户">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                
                                <!-- 示例用户数据 -->
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="1">
                                            <label class="form-check-label">1</label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="avatar-sm me-3 bg-primary text-white">
                                                <i class="bi bi-person"></i>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">admin</h6>
                                                <small class="text-muted">ID: 1</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>admin@example.com</td>
                                    <td>
                                        <span class="badge bg-danger rounded-pill me-1">ADMIN</span>
                                        <span class="badge bg-info rounded-pill me-1">USER</span>
                                    </td>
                                    <td>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" checked disabled>
                                            <label class="form-check-label">
                                                <span class="text-success">已启用</span>
                                            </label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex justify-content-center gap-1">
                                            <button class="btn btn-primary table-action-btn" data-bs-toggle="tooltip" title="编辑用户">
                                                <i class="bi bi-pencil"></i>
                                            </button>
                                            <button class="btn btn-info text-white table-action-btn" data-bs-toggle="tooltip" title="查看详情">
                                                <i class="bi bi-eye"></i>
                                            </button>
                                            <button class="btn btn-danger table-action-btn" data-bs-toggle="tooltip" title="删除用户">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="2">
                                            <label class="form-check-label">2</label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="avatar-sm me-3 bg-info text-white">
                                                <i class="bi bi-person"></i>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">user</h6>
                                                <small class="text-muted">ID: 2</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>user@example.com</td>
                                    <td>
                                        <span class="badge bg-info rounded-pill me-1">USER</span>
                                    </td>
                                    <td>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" checked disabled>
                                            <label class="form-check-label">
                                                <span class="text-success">已启用</span>
                                            </label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex justify-content-center gap-1">
                                            <button class="btn btn-primary table-action-btn" data-bs-toggle="tooltip" title="编辑用户">
                                                <i class="bi bi-pencil"></i>
                                            </button>
                                            <button class="btn btn-info text-white table-action-btn" data-bs-toggle="tooltip" title="查看详情">
                                                <i class="bi bi-eye"></i>
                                            </button>
                                            <button class="btn btn-danger table-action-btn" data-bs-toggle="tooltip" title="删除用户">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- 分页与批量操作 -->
                    <div class="row mt-4">
                        <div class="col-md-6 mb-3 mb-md-0">
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-outline-primary" disabled id="enableBtn">
                                    <i class="bi bi-check2-all me-1"></i>批量启用
                                </button>
                                <button type="button" class="btn btn-outline-danger" disabled id="disableBtn">
                                    <i class="bi bi-x-octagon me-1"></i>批量禁用
                                </button>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <nav aria-label="用户分页" class="float-md-end">
                                <ul class="pagination pagination-sm mb-0">
                                    <li class="page-item disabled">
                                        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
                                            <i class="bi bi-chevron-left"></i>
                                        </a>
                                    </li>
                                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                                    <li class="page-item">
                                        <a class="page-link" href="#">
                                            <i class="bi bi-chevron-right"></i>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 添加用户模态框 -->
            <div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content border-0 shadow">
                        <div class="modal-header bg-primary text-white">
                            <h5 class="modal-title" id="addUserModalLabel"><i class="bi bi-person-plus me-2"></i>添加新用户</h5>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body p-4">
                            <form>
                                <div class="mb-3">
                                    <label for="newUsername" class="form-label">用户名</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="bi bi-person text-primary"></i>
                                        </span>
                                        <input type="text" class="form-control" id="newUsername" placeholder="请输入用户名" required>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="newEmail" class="form-label">电子邮件</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="bi bi-envelope text-primary"></i>
                                        </span>
                                        <input type="email" class="form-control" id="newEmail" placeholder="请输入邮箱" required>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="newPassword" class="form-label">密码</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="bi bi-key text-primary"></i>
                                        </span>
                                        <input type="password" class="form-control" id="newPassword" placeholder="请输入密码" required>
                                        <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                                            <i class="bi bi-eye"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">角色</label>
                                    <div class="d-flex gap-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="USER" id="roleUser" checked>
                                            <label class="form-check-label" for="roleUser">
                                                <span class="badge bg-info rounded-pill">用户</span>
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="ADMIN" id="roleAdmin">
                                            <label class="form-check-label" for="roleAdmin">
                                                <span class="badge bg-danger rounded-pill">管理员</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-check form-switch mb-3">
                                    <input class="form-check-input" type="checkbox" id="enabledSwitch" checked>
                                    <label class="form-check-label" for="enabledSwitch">账户已启用</label>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer border-top-0">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary">
                                <i class="bi bi-person-plus me-1"></i>创建用户
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    // 切换密码可见性
                    const togglePassword = document.getElementById('togglePassword');
                    const passwordField = document.getElementById('newPassword');
                    
                    if (togglePassword && passwordField) {
                        togglePassword.addEventListener('click', function() {
                            const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
                            passwordField.setAttribute('type', type);
                            this.querySelector('i').classList.toggle('bi-eye');
                            this.querySelector('i').classList.toggle('bi-eye-slash');
                        });
                    }
                    
                    // 全选/取消全选
                    const selectAll = document.getElementById('selectAll');
                    const checkboxes = document.querySelectorAll('tbody .form-check-input');
                    const enableBtn = document.getElementById('enableBtn');
                    const disableBtn = document.getElementById('disableBtn');
                    
                    if (selectAll) {
                        selectAll.addEventListener('change', function() {
                            checkboxes.forEach(checkbox => {
                                checkbox.checked = this.checked;
                            });
                            updateBulkButtons();
                        });
                    }
                    
                    checkboxes.forEach(checkbox => {
                        checkbox.addEventListener('change', updateBulkButtons);
                    });
                    
                    function updateBulkButtons() {
                        const checkedCount = document.querySelectorAll('tbody .form-check-input:checked').length;
                        if (enableBtn) enableBtn.disabled = checkedCount === 0;
                        if (disableBtn) disableBtn.disabled = checkedCount === 0;
                    }
                    
                    // 切换过滤器按钮
                    const filterBtns = document.querySelectorAll('.filter-btn');
                    filterBtns.forEach(btn => {
                        btn.addEventListener('click', function() {
                            filterBtns.forEach(b => b.classList.remove('active'));
                            this.classList.add('active');
                        });
                    });
                    
                    // 初始化工具提示
                    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                    tooltipTriggerList.map(function (tooltipTriggerEl) {
                        return new bootstrap.Tooltip(tooltipTriggerEl);
                    });
                });
            </script>
        </div>
    </div>
</body>
</html> 